import React, { memo, useState } from 'react';
import './style.less';
import AddModal from './cPages/add-modal';
/* 表格组件 */
import { Table } from 'antd';
export default memo(function Mytable(props) {
  let templateColums = [];
  if (props.dataList.list) {
    let columObj = props.dataList.list[0];
    let i = 0;
    let j = 0;
    for (let item in columObj) {
      let templateCol = {};
      templateCol.title = item.toUpperCase();
      templateCol.dataIndex = item;
      templateCol.key = item;
      templateCol.ellipsis = true;
      templateCol.align = 'center';
      templateColums.push(templateCol);
      i++;
    }
    for (let item of props.dataList.list) {
      for (let [cItemName, Citem] of Object.entries(item)) {
        if (typeof Citem === 'object') {
          item[cItemName] = '0';
        }
      }
      item.key = j;
      j++;
    }
  }
  const columns = templateColums;
  const data = props.dataList.list;
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        'selectedRows: ',
        selectedRows,
      );
    },
    getCheckboxProps: (record) => ({
      name: record.name,
    }),
  };
  const [selectionType, setSelectionType] = useState('checkbox');
  return (
    <div className="my-table">
      <div className="controls">
        <AddModal />
      </div>
      <Table
        rowSelection={{
          type: selectionType,
          ...rowSelection,
        }}
        columns={columns}
        dataSource={data}
      ></Table>
    </div>
  );
});
